<template>
  <div class="banner  animated slideInRight fast">
    <div class="left " @mouseenter="leftShow = true" @mouseleave="leftShow = false">
      <transition name="text">
        <img class="text" src="~img/2/xyzp.png" alt />
      </transition>
      <transition name="context">
        <ul class="context" v-if="leftShow">
          <li>
            <a href="javascript:;">校园招聘</a>
          </li>
          <li>
            <a href="javascript:;">MBA招聘</a>
          </li>
        </ul>
      </transition>
    
        <img class="photo" src="~img/2/bg_job_left.png" alt />
      
    </div>
    <div class="right" @mouseenter="rightShow = true" @mouseleave="rightShow = false">
      <img class="text" src="~img/2/sxszp.png" alt />
       <transition name="context">
        <ul class="context" v-if="rightShow">
          <li>
            <a href="javascript:;">暑期实习</a>
          </li>
          <li>
            <a href="javascript:;">MINI实习</a>
          </li>
              <li>
            <a href="javascript:;">日常实习</a>
          </li>
        </ul>
      </transition>
      <img class="photo" src="~img/2/bg_job_right.png" alt />
      
    </div>
  </div>
</template>

<script>
export default {
  name: "BannerTwo",
  data() {
    return {
      leftShow: false,
      rightShow:false,
    };
  }
};
</script>

<style scoped>
.banner {
  position: relative;
  height: 70%;
  width: 100%;
  position: absolute;
  top: 15%;
  /* background: red; */
  display: flex;
  justify-content: center;
}
.banner .left,
.banner .right {
  /* width: 32.3%;
  height: 79%;
  box-sizing: border-box; */
  padding: 4% 4%;
  width: 25.3%;
  height: 54%;

  position: fixed;
  margin: 0 2.75%;
  top: 17.5%;

  background-color: #fff;
  border-radius: 10px;
  position: relative;
}
.banner .left .text {
  width: 175px;
  height: 60px;
}
.banner .right .text {
  width: 42%;
}
.banner .left .photo,
.banner .right .photo {
  width: 450px;
  position: absolute;
  bottom: -11%;
  right: 0%;
}

.banner .left .context li,.banner .right .context li {
  margin-top: 30px;
}
.banner .left .context li:first-of-type,.banner .right .context li:first-of-type {
  margin-top: 45px;
}

.banner .left .context li > a,.banner .right .context li > a {
  color: #2762f3;
  font-size: 2rem;
  cursor: pointer;
}
.banner .left .context li a:hover,.banner .right .context li a:hover{
  color:#d9b512
}


/* contxt动画 */
.context-enter {
  opacity: 0;
  transform: translateY(-15px);
}
.context-enter-active {
  transition: 0.5s;
}
/* photo动画 */
.photo{
  transition:0.5s
}
.left:hover .photo ,.right:hover .photo {
  transform: translateX(80px);
  opacity: 0.4;
}
/* text动画 */
.text{
  transition:0.5s
}
.left:hover .text {
  transform: translateY(-10px);
}
/* animate动画设置 */
/* .animate{
  animation-duration:0.5s;
} */
</style>